<template>
  <el-card class="box-card" style="margin-left: 20px; margin-bottom: 20px" >
    <div :class="[icon, 'icon']"></div>
    <div style="font-size: 10px">{{ fileName }}</div>
    <el-popover
      placement="top-start"
      trigger="hover"
      effect="dark"
      >
      <el-container>
        <el-tag v-for="tag in fileInfo.tagList" style="margin-right: 5px">
          {{tag.tagName}}
        </el-tag>
      </el-container>
      <el-button slot="reference" style="margin-top: 5px" type="primary" plain size="mini">查看知识标签</el-button>
    </el-popover>
    <el-button @click="toView" size="mini" type="primary" style="margin-top: 10px">查看</el-button>
  </el-card>
</template>

<script>
  export default {
    name: 'FileItem',
    data: function() {
      return {

      }
    },
    props: {
      fileInfo: {
        id: String,
        fileName: String,
        fileType: String,
        tagList: Array,
      }
    },
    computed: {
      icon: function() {
        switch (this.fileInfo.fileType.toLowerCase()) {
          case "markdown": return "el-icon-document";
          case "pdf": return "el-icon-data-analysis";
          case "png":
          case "jpg":
          case "jpeg": return "el-icon-picture-outline";
          default: return "el-icon-paperclip";
        }
      },
      fileName: function() {
        let content = this.fileInfo.fileName;
        if (content.length < 10) {
          return content;
        }
        return content.slice(0,10) + "..."
      },
    },
    methods: {
      toView() {
        this.$router.push({name: "FileView", params: {fileInfo: this.fileInfo}});
      }
    }
  }
</script>

<style scoped>
  .box-card {
    width: 160px;
    padding:2px;
    border: 2px;
    text-align: center;
  }
  .icon {
    font-size:  120px;
  }
</style>
